<template>
    <div class="vaccine-edit">
        <!-- 页面头部 -->
        <div class="page-header">
            <el-page-header @back="router.back()" content="编辑疫苗" />
        </div>

        <!-- 编辑表单 -->
        <el-card>
            <template #header>
                <h3>编辑疫苗信息</h3>
            </template>

            <el-form ref="formRef" :model="form" :rules="rules" label-width="120px" :loading="loading">
                <el-form-item label="疫苗名称" prop="name">
                    <el-input v-model="form.vaccineName" placeholder="请输入疫苗名称" />
                </el-form-item>

                <el-form-item label="疫苗编号" prop="code">
                    <el-input v-model="form.batchNumber" placeholder="请输入疫苗编号" />
                </el-form-item>

                <el-form-item label="生产厂家" prop="manufacturer">
                    <el-input v-model="form.manufacturer" placeholder="请输入生产厂家" />
                </el-form-item>

                <el-form-item label="规格" prop="stockStatus">
                    <el-input v-model="form.specification" placeholder="请输入规格" />
                </el-form-item>
                <el-form-item label="存储条件" prop="storageTemperature">
                    <el-input v-model="form.storageCondition" placeholder="如：2-8℃" />
                </el-form-item>

                <el-form-item label="有效期" prop="validityPeriod">
                    <el-input v-model="form.validityPeriod" placeholder="如：12个月" />
                </el-form-item>


                <el-form-item label="疫苗描述" prop="description">
                    <el-input v-model="form.description" type="textarea" :rows="3" placeholder="请输入疫苗描述信息" />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="handleSubmit" :loading="submitLoading">
                        更新
                    </el-button>
                    <el-button @click="router.back()">取消</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElLoading } from 'element-plus'
import axios from 'axios'
const route = useRoute()
const router = useRouter()
const formRef = ref()
const loading = ref(false)
const submitLoading = ref(false)
const vaccineId = route.query.id

// 表单数据
const form = ref({
    vaccineName: '',
    batchNumber: '',
    manufacturer: '',
    storageCondition: '',
    validityPeriod: '',
    description: '',
    specification: ''
})

// 表单验证规则
const rules = {
    name: [{ required: true, message: '请输入疫苗名称', trigger: 'blur' }],
    code: [{ required: true, message: '请输入疫苗编号', trigger: 'blur' }],
    manufacturer: [{ required: true, message: '请输入生产厂家', trigger: 'blur' }],
}

onMounted(() => {
    fetchVaccineDetail()
})

// 获取疫苗详情
const fetchVaccineDetail = async () => {
    loading.value = true
    axios.get("http://127.0.0.1:8081/vaccine/ViOne", {
        headers: {
            'X-Admin-Token': sessionStorage.getItem("token")
        },
        params: {
            id: vaccineId
        }
    }).then((req) => {
        form.value = req.data.data
    }).finally(() => {
        loading.value = false
    })
}

// 提交表单
const handleSubmit = async () => {
    //创建纯数据表单
    const submitData = {
        id: vaccineId,
        vaccineName: form.value.vaccineName,
        batchNumber: form.value.batchNumber,
        manufacturer: form.value.manufacturer,
        storageCondition: form.value.storageCondition,
        validityPeriod: form.value.validityPeriod,
        specification: form.value.specification,
        description: form.value.description
    }
    const loadingInstance = ElLoading.service({
        target: loading.value,
        text: '更新中...',
        background: 'rgba(0, 0, 0, 0.7)',
    })

    axios.put("http://127.0.0.1:8081/vaccine/UpdateVI", submitData, {
        headers: {
            'X-Admin-Token': sessionStorage.getItem("token")
        }
    }).then((req) => {
        if (req.data.success == true) {
            ElMessage({
                message: req.data.message,
                type: 'success',
            });

            router.push({
                name: 'VaccineDetail',
                query: { id: vaccineId }
            }).then(() => {
                nextTick().then(() => {
                    location.reload()
                })

            })
        } else {
            ElMessage({
                message: req.data.message,
                type: 'error',
            });
        }
    }).finally(() => {
        loadingInstance.close()
    })
}
</script>

<style scoped>
.vaccine-edit {
    padding: 20px;
}

.page-header {
    margin-bottom: 20px;
}
</style>